import React from 'react';
import { Tooltip } from 'antd';
import moment from 'moment';
import { useTablePipeline } from 'ali-react-table';
// @ts-ignore
import { CheckCircleOutlined, CloseCircleOutlined } from '#/utils/antdIcons';
import { AntdBaseTable } from '@/base/TBaseTable';
import type { IDataSourceType } from '../../type';

import styles from './index.less';

interface IProps {
  /**
   * 数据源
   */
  dataSource?: IDataSourceType[];
}

const List = (props: IProps) => {
  const { dataSource = [] } = props;

  const columns = [
    {
      code: 'createTime',
      name: '提交时间',
      width: 150,
      render(v: string) {
        return v ? moment(v).format('YYYYMMDD HHmm') : '-';
      },
    },
    {
      code: 'creatorName',
      name: '提交人',
      width: 100,
      render(v: string) {
        return v || '-';
      },
    },
    {
      code: 'stationId',
      name: '场站ID',
      width: 150,
      render(v: number) {
        return v ?? '-';
      },
    },
    {
      code: 'remark',
      name: '备注',
      width: 300,
      render(v: string) {
        return (
          <Tooltip placement="topLeft" title={v}>
            <div className={styles.text}>{v || '-'}</div>
          </Tooltip>
        );
      },
    },
    {
      code: 'feedbackContent',
      name: '授权结果反馈',
      width: 500,
      render(v: string, record: IDataSourceType) {
        return (
          <Tooltip placement="topLeft" title={v}>
            <div className={styles.feedbackContent}>
              <div className={styles.left}>
                {record?.status === 1 ? (
                  <CheckCircleOutlined className={styles.checkCircleOutlined} />
                ) : (
                  <CloseCircleOutlined className={styles.closeCircleOutlined} />
                )}
              </div>
              <div className={styles.right}>{v || '-'}</div>
            </div>
          </Tooltip>
        );
      },
    },
    {
      code: 'feedbackTime',
      name: '反馈时间',
      width: 150,
      render(v: string) {
        return v ? moment(v).format('YYYYMMDD HHmm') : '-';
      },
    },
  ];

  const pipeline = useTablePipeline({})
    .input({ dataSource: dataSource, columns: columns as any })
    .primaryKey('id')
    .appendRowPropsGetter((): any => {
      const color = '#222629';
      return {
        style: { '--bgcolor': color, '--hover-bgcolor': color },
      };
    });

  return (
    <div className={`${styles.container}`}>
      <AntdBaseTable
        useVirtual={{ horizontal: true, vertical: true, header: false }}
        style={{
          '--row-height': '28px',
          // '--header-bgcolor': '#383C3E',
          '--header-row-height': '28px',
          '--cell-padding': '4px 16px',
          '--cell-border-vertical': '1px solid #4E5154',
          '--header-cell-border-vertical': '1px solid #4E5154',
          '--hover-bgcolor': '#222629',
        }}
        {...pipeline.getProps()}
      />
    </div>
  );
};

export default List;
